<template>
	<view class="topclassify">

		<!-- <view class="topList" v-for="p in miaosha" :key="p.id">
			
			<view class="tag">
				<image :src="p.tagImgUrl" mode="aspectFill"></image>
				<view class="left">
					<text class="name">{{p.pName}}</text>
					<view class="icon-box">
						<text class="num">{{p.thours}}</text>
						<text class="num">{{p.tminutes}}</text>
						<text class="num">{{p.tseconds}}</text>
					</view>
				
					<text class="btn" @click="seckill(1,p)">去抢购</text>
				
				</view>
			</view>
		</view> -->

		<view class="topList" v-for="d in promotionList" :key="d.type">
			<view v-for="p in d.data" :key="p.id" class="tag">
				<image :src="p.image" mode="aspectFill"></image>
				<view class="left">
					<text class="name">{{p.sName||p.pName||p.name}}</text>
					<view class="icon-box" v-if="d.type == 1">
						<text class="num">{{p.thours}}</text>
						<text class="num">{{p.tminutes}}</text>
						<text class="num">{{p.tseconds}}</text>
					</view>
					<view class="icon-box" style="margin-top: 160upx;" v-if="d.type != 1">
						<!-- <text class="name">葡萄酒+美味饼干</text>
					<text class="cuxiao" style="font-size: 38upx;">￥289</text> -->
					</view>
					<text class="btn" @click="seckill(d.type,p)" v-if="d.type !== 2&&d.type !== 13">去抢购</text>
					<text class="btn" @click="seckill(d.type,p)" v-if="d.type == 2||d.type == 13">去拼团</text>
				</view>
			</view>

		</view>
		<!-- <view class="topList">
			<image src="/static/img/2/2-22.png" mode="aspectFill"></image>
			<view class="left">
				<text class="name">商品促销</text>
				<view class="icon-box">
					<text class="cuxiao">70% OFF</text>
				</view>
				<text class="btn">去抢购</text>
			</view>
		</view>
		<view class="topList">
			<image src="/static/img/2/2-22.png" mode="aspectFill"></image>
			<view class="left">
				<text class="name">买赠服务</text>
				<view class="icon-box" style="margin-top: 160upx;">
					<text class="cuxiao" style="font-size: 38upx;">·买一赠一</text>
				</view>
				<text class="btn" @click="mai">去抢购</text>
			</view>
		</view>
		<view class="topList">
			<image src="/static/img/2/2-22.png" mode="aspectFill"></image>
			<view class="left">
				<text class="name">团购活动</text>
				<view class="icon-box" style="margin-top: 160upx;">
					<text class="name">葡萄酒+美味饼干</text>
					<text class="cuxiao" style="font-size: 38upx;">￥289</text>
				</view>
				<text class="btn" @click="tuan">去拼团</text>
			</view>
		</view> -->


	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				promotionList: [],
				timer: null,
				times: '00:00:00',

				thours: "00",
				tminutes: "00",
				tseconds: "00",

				miaosha: {}

			}
		},
		async onLoad() {

			for (var i = 1; i < 14; i++) {
				this.getPromotionList(i)
			}

		},
		methods: {


			async getPromotionList(type) {
				this.$Request.post4(
					this.$api.httpApi.promotion.getPricePreferentialList, {
						"type": type,
						'iShopId':''
					}
				).then(res => {
					if (res.code == 200) {

						if (type == 1 && res.data.data.length > 0) {
							this.miaosha = res.data.data
							for (const t of this.miaosha) {
								var arr = []
								var re = /src="([^"]*)"/g;
								if (this.miaosha.length > 0) {
									console.log(t.cDescription != undefined)
									if (t.cDescription != undefined) {
										while (arr = re.exec(t.cDescription)) {

											this.$set(t, "image", arr[1])
										}
									} else {
										this.$set(t, "image", '')
									}

								} else {
									// this.$set(a[0], "image", '')
								}
							}
							this.timeDown()
						} else {
							this.getsrc(res.data.data, type)
						}


					}
				})

			},
			getsrc(a, type) {

				for (const t of a) {
					var arr = []
					var re = /src="([^"]*)"/g;
					if (a.length > 0) {
						console.log(t.cDescription != undefined)
						if (t.cDescription != undefined) {
							while (arr = re.exec(t.cDescription)) {

								this.$set(t, "image", arr[1])
							}
						} else {
							this.$set(t, "image", '')
						}

					} else {
						// this.$set(a[0], "image", '')
					}
				}


				var dd = {
					"type": type,
					"data": a
				}
				this.promotionList.push(dd)

			},
			timeDown() { // 倒计时
				clearInterval(this.timer);
				for (const item of this.miaosha) {
					// this.$set(a, "timer", null)
					var starttime = new Date(item.pStartDate.replace(/-/g, "/")) / 1000;
					var nowDate = Math.round(new Date() / 1000); // 当前时间
					//var endtime = Number(this.initActiveMsgObj.end_time); 
					var endtime = new Date(item.pEndDate.replace(/-/g, "/")) / 1000;
					// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
					if (endtime < nowDate) {
						return
					}


					var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
					//天数
					var days = Math.floor(totalSeconds / (60 * 60 * 24));
					//取模（余数）
					var modulo = totalSeconds % (60 * 60 * 24);
					//小时数
					var hours = Math.floor(modulo / (60 * 60));
					hours = hours < 10 ? ('0' + hours) : hours;
					modulo = modulo % (60 * 60);
					//分钟
					var minutes = Math.floor(modulo / 60);
					minutes = minutes < 10 ? '0' + minutes : minutes;
					// console.log(minutes)
					//秒
					var seconds = modulo % 60;
					seconds = seconds < 10 ? '0' + seconds : seconds;
					// console.log(seconds);
					//输出到页面
					this.$set(item, "thours", hours)
					this.$set(item, "tminutes", minutes)
					this.$set(item, "tseconds", seconds)
					// this.seconds = seconds + ':' + minutes + ':' + seconds;
					// console.log(days + "天" + hours + "时" + minutes + "分");
					//if(totalSeconds <= 0){
					if (totalSeconds <= 60) {
						clearInterval(this.timer);
						// window.location.reload()
					} else {
						this.timer = setInterval(this.timeDown, 1000);
					}


				}



			},








			seckill(type, data) {
				this.$SysCache.put('itemData', data, 864000)
				var cUrl = ''
				switch (type) {
					case 1:
						cUrl = `/pages/inner/seckill`
						break;
					case 2:
						cUrl = `/pages/promotion/assemble/fresh?type=GB`
						break;
					case 3:
						cUrl = `/pages/promotion/gifts/fresh`
						break;
					case 4:
						cUrl = `/pages/promotion/index/index`
						break;
					case 5:
						cUrl = `/pages/promotion/FullRreduction/fresh`
						break;
					case 6:
						cUrl = `/pages/promotion/index/collocation`
						break;
					case 10:
						cUrl = `/pages/promotion/addmoney/fresh`
						break;
					case 11:
						cUrl = `/pages/promotion/integral/fresh`
						break;
					case 12:
						cUrl = `/pages/promotion/N_buy/index`
						break;
					case 13:
						cUrl = `/pages/promotion/assemble/fresh?type=AB`
						break;
				}
				uni.navigateTo({
					url: cUrl
				})


			}
		}



	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
		padding: 21upx;
	}

	.topclassify {
		.topList {
			position: relative;
			margin-bottom: 42upx;

			image {
				width: 100%;
				height: 387upx;
			}

			.tag {
				position: relative;

				.left {
					position: absolute;
					top: 65upx;
					left: 54upx;

					.name {
						font-size: 31upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						display: block;
					}

					.icon-box {
						margin-top: 180upx;

						.num {
							width: 48upx;
							height: 48upx;
							background: rgba(255, 255, 255, 1);
							border-radius: 50%;
							display: inline-flex;
							justify-content: center;
							align-items: center;
							font-size: 29upx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(255, 47, 87, 1);
							margin-right: 31upx;
						}

						.cuxiao {
							font-size: 48upx;
							color: #fff;

						}

						.name {
							font-size: 27upx;
							display: block;
						}
					}

					.btn {
						position: relative;
						left: 450upx;
						bottom: 0;
						border: 1upx solid #fff;
						width: 149upx;
						height: 54upx;
						border-radius: 29upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 27upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
					}
				}

			}


		}




	}
</style>
